<template>
    <div class="box">
        <component-head />
        <div class="swrap">
            <van-swipe class="my-swipe" :autoplay="3000">
                <van-swipe-item v-for="banner in banners" :key="banner.id">
                    <img :src="banner.pic" alt="" />
                </van-swipe-item>
            </van-swipe>
            <h6>{{biao.name}}</h6>
            <div class="pic">
              <span
              style=" color: red;
              font-size: .6rem;">
              ￥{{biao.originalPrice}}</span>
              <span
              style=" color: #666;
              font-size: .4rem;
              padding-left:.4rem;">
              <s>￥{{biao.minPrice}}</s></span>
            </div>
            <!-- <div class="box">
                  <div class="Price">￥{{banner.minPrice}}</div>
                  <div class="sales">日销量{{banner.views}}笔</div>
             </div> -->
            <div class="message">
            <div class="message-one">
               <div class="message-one-left">评委</div>
                <div class="message-one-right">九曲黄河水中游，不济一瓶二锅头</div>
            </div>
             <div class="message-one">
               <div class="message-one-left">暮色</div>
                <div class="message-one-right">晓看天色暮看云，相逢如旧意中情</div>
            </div>
             <div class="message-one">
               <div class="message-one-left">材料</div>
                <div class="message-one-right">全国送货上门，市区免费运送</div>
            </div>
             <div class="message-one">
               <div class="message-one-left">地址</div>
                <div class="message-one-right">下单填写留言，免费赠送贺卡</div>
            </div>
         </div>
            <div class="content" v-html="content"></div>
        </div>
        <footerq :basic="basic" @addnum="addnum" @buy="buy"/>
    </div>
</template>

<script>
import ComponentHead from '../../components/ComponentHead.vue'
import { fetchDetail, addCart } from '../../api/index'
import Footerq from '../Details/components/Footerq.vue'
import { getToken } from '../../utils/index'
export default {
  data () {
    return {
      banners: [], // 轮播数据
      biao: '', // 主页数据
      content: '', // 富文本数据
      basic: {}, // 底部数据
      goodsId: ''
    }
  },
  created () {
    this.details()
  },
  methods: {
    // 初始数据
    details () {
      fetchDetail(this.$route.query.id).then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data.pics
          this.biao = res.data.data.basicInfo
          this.content = res.data.data.content
          this.goodsId = this.$route.query.id
          this.basic = {
            number: 1,
            ...res.data.data.basicInfo
          }
        }
      })
    },
    addnum (number) {
      // 加入购物车
      addCart({
        goodsId: this.$route.query.id,
        number: this.basic.number,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.$toast.success('加入购物车成功')
          // vux 获取角标储存
          this.$store.commit('cart/vuxcart', {
            items: res.data.data.items,
            buyNumber: res.data.data.number
          })
        }
      })
    },
    // 单页面加购加订单
    buy (number) {
      addCart({
        goodsId: this.$route.query.id,
        number: this.basic.number,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          // vux 获取角标储存
          this.$store.commit('cart/vuxcart', {
            items: res.data.data.items,
            buyNumber: res.data.data.number
          })
          const id = this.$route.query.id
          this.$router.push({
            path: '/orderCreateOne',
            query: {
              id
            }
          })
        }
      })
    }
  },
  components: { ComponentHead, Footerq }
}
</script>

<style lang="scss" scoped>
.box{
    width: 100vw;
    overflow: hidden;
}
.my-swipe{
    width: 10rem;
    img{
      width: 100%;
     height:8rem;
    }
  }
   .message{
    background-color: #ffffff;
    padding: 0.1rem 0.3rem;
    margin-bottom:0.15rem ;
    font-size:0.28rem ;
    .message-one{
      display: flex;
      justify-content: space-between;
        .message-one-left{
          width: 10%;
          padding: 0.2rem 0;
        }
       .message-one-right{
         width: 84%;
         border-bottom: 1px solid #e9ecf0;
         padding: 0.2rem 0;
       }
    }
  }
  .message-bottom{
    display: flex;
    justify-content: space-between;
    .message-bottom-left{
      width: 10%;
    }
    .message-bottom-right{
      width: 85%;
      padding-left:1rem ;
    }
  }

.content{
    /deep/p{
            margin: 0;
            padding: 0;
            text-align: center;
            font-size: .4rem;
            img{
            margin: 0 auto;
            // width: 100%;
        }
        }
    }
h6 {
    text-align: center;
    font-size: .6rem;
    margin: 0;

}
</style>
